<template>
  <window-header />

  <main-layout :is-empty="!userId">
    <!-- 搜索框按钮   -->
    <template #searchBtn>
      <search-box>
        <n-popover placement="bottom" trigger="click" class="custom-popover">
          <template #trigger>
            <n-button size="small" class="add-btn">
              <svg-icon name="add" :size="16" />
            </n-button>
          </template>

          <extra-search-btn-popover />
        </n-popover>
      </search-box>
    </template>

    <!--  左侧列表  -->
    <template #mainLeftList>
      <chat-list @click-item="handleSetCurrentInfo" />
    </template>

    <!--   右侧标题 @show-drawer="handleShowSideInfoDrawer" -->
    <template #rightTitle>
      <!-- 标题面板 -->
      <title-panel :title="chatTitle">

        <n-button quaternary title="聊天记录" style="padding: 0 6px;" @click="handleChatLogs">
          <svg-icon name="message" :size="16" />
        </n-button>

        <n-popover placement="bottom" trigger="click" class="custom-popover">
          <template #trigger>
            <n-button quaternary title="从手机导入聊天记录" style="padding: 0 2px;">
              <svg-icon name="arrow-down" :size="16" />
            </n-button>
          </template>
          <import-records-from-phone />
        </n-popover>

        <n-button quaternary title="聊天信息" class="chat-btn" @click="open = true">
          <svg-icon name="more-point" :size="16" />
        </n-button>

      </title-panel>
    </template>

    <!--   右侧主内容：聊天窗口  -->
    <template #mainRightContent>

      <n-split direction="vertical" :max="0.6" :min="0.4" :resize-trigger-size="1">
        <!--    聊天信息详情  -->
        <template #1>
          <chat-detail ref="detailRef" />
        </template>

        <!--    发消息窗口  -->
        <template #2>
          <Suspense>
            <template #default>
              <input-area-msg />
            </template>
          </Suspense>
        </template>
      </n-split>
    </template>
  </main-layout>

  <!--  标题面板弹出的抽屉信息   -->
  <n-drawer v-model:show="open" :width="300" :show-mask="false" class="custom-drawer">
    <n-drawer-content>
      <side-panel-drawer />
    </n-drawer-content>
  </n-drawer>

  <!-- 右键菜单 -->
 <content-menu />
</template>

<script setup>
import MainLayout from "@/components/MainLayout.vue";
import SearchBox from "@/views/chat/search/index.vue";
import ExtraSearchBtnPopover from './search/extraBtnPopover.vue';
import ImportRecordsFromPhone from "@/views/chat/title/importRecordsFromPhone.vue";
import ChatList from './chatList/index.vue';
import ChatDetail from './chatDetail/index.vue';
import InputAreaMsg from './inputArea/index.vue';
import SidePanelDrawer from "@/views/chat/title/SidePanelDrawer.vue";
import ContentMenu from './contextMenu.vue'

import { ref, nextTick } from "vue";
const open = ref(false);

import { useCreateWindow } from "@/hooks/useCreateWindow.js";
const { openWindow } = useCreateWindow();

/**
 * @desc: 新建窗口，与xxx的聊天记录【支持多窗口】
 * 此处不能用emit消息通知的方式，因为
      1. 需要等窗口创建成功才能发通知
      2. 可能同时打开多个聊天记录窗口，所以加参数区分
 * @author: yanrui
 * @time: 2025-10-28 11:41:11
 */
const handleChatLogs = async () => {
  // 这里其实不用判断，后面改样式，只有点击了左侧的人，才会显示它
  if(!userId.value) {
    return
  }
  await openWindow(`chat/historyLogs/${userId.value}`, {
    title: `与${chatTitle.value}的聊天记录`,
    url: `/chat/historyLogs?userId=${userId.value}&userName=${chatTitle.value}`,
    decorations: false,
    width: 900,
    height: 640,
    minWidth: 900,
    minHeight: 640,
  });
};

const detailRef = ref();

// 右侧面板的标题，通常为人名(昵称)
const chatTitle = ref('')
const userId = ref('')
/**
 * 点击左侧联系人事件，todo: 以下123个事件待完善
 * 1.右侧聊天记录列表更新标题和内容【已完成】
 * 2.当前的(新)输入框自动聚焦
 * 3.原先的输入框如果有内容，保留且显示为草稿
 * */
const handleSetCurrentInfo = (e) => {
  chatTitle.value = e.name
  userId.value = e.id
  nextTick(() => {
    detailRef.value.setChatLog(e)
  })
};

</script>

<style lang="scss" scoped>
.add-btn {
  margin-left: 6px;
  :deep(.n-button) {
    padding: 0 5px;
  }
}
:deep(.chat-btn.n-button) {
  padding: 0 8px;
}
:deep(.n-drawer.n-drawer--right-placement) {
  top: 66px !important;
}
</style>
